import React, { Component } from 'react';
import { Input } from 'antd';

class TrimInput extends Component<any> {
  handleBlur = (e) => {
    e.target.value = e.target.value.trim();
    const { onChange } = this.props;
    onChange(e);
  }

  render = () => <Input onBlur={this.handleBlur} {...this.props} />
}

const withTrim = (WrappedComponent) =>
  class WrapperComponent extends Component<any, any> {
    handleBlur = (e) => {
      e.target.value = e.target.value.trim();
      const { onChange } = this.props;
      onChange(e);
    }

    render = () => <WrappedComponent onBlur={this.handleBlur} {...this.props} />
  }

export {
  withTrim
};

export default TrimInput;